﻿<html>
<head>
	<title>Angry Demo Page</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<link rel="stylesheet" type="text/css" href="../styles.css"/>
	<script type="text/javascript" src="../lib/html.js"></script>
	<script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="../lib/raphael-min.js"></script>
	<script type="text/javascript" src="../mote.js"></script>
	<script type="text/javascript" src="angry.js"></script>
	<script type="text/javascript">
		$(function(){
			$("h1").after(Html.div({style:"font-style:italic; color:#ccc;"}, 
				"Powered by MoteJS v.", Mote.version, ", Angry v.", Angry.version
			));
			
			var world = Mote.world($("#screen"), function(world, screen){
				var ground = world.gravity.groundPosition = 700;
				var width = screen.width;
				screen.rect(0, 0, screen.width, ground).attr({fill:"90-#eef-#cde", "stroke-width":0});
				screen.rect(0, ground, screen.width, screen.height-ground).attr({fill:"90-#8a4-#aba", "stroke-width":0});
				screen.path(["M0,",ground,"L",width,",",ground]);
			});
			
			Mote.solid(world, [465, 85], {
				mass: 5,
				template: function(screen){
					return screen.rect(0, 0, 20, 20).attr({fill:"#00f", stroke:"#558"});
				}
			});
			
			
			Mote.solid(world, [525, 85], {
				mass: 8,
				template: function(screen){
					var d = 10;
					return screen.circle(d, d, d).attr({fill:"r(.3,.4)#fee-#faa", stroke:"#e99"});
				}
			});
			
			(function(){
				var r = 12;
				for(var i=0; i<4; i++){
					Mote.solid(world, [290+i*(r*2+2), 100], {
						template: function(screen){
							return screen.circle(r, r, r).attr({fill:"r(.3,.4)#ccc-#555"});
						}
					});
				}
			})();
			
			Mote.solid(world, [1000, world.gravity.groundPosition - 320], {
				static: true,
				draggable: true,
				template: function(screen){
					return screen.rect(0, 0, 10, 220).attr({fill:"#ffc", stroke:"#888"});
				},
				onCollision: function(collision){var _=this;
					var fill = _.icon.attr("fill");
					_.icon.attr({fill:"#f88"});
					
					_.world.getScreen().circle(
						collision.active.velocity.x<0?_.bbox.x:_.bbox.x2, 
						collision.pos.y, 3
					).attr({fill:"#f00", "stroke-width":0})
					
					setTimeout(function(){
						_.icon.attr({fill:fill});
					}, 500);
				}
			});
			
			Angry.gun(world, [250, world.gravity.groundPosition]);
		});
	</script>
</head>
<body>
	<h1>Angry Demo Page</h1>
	<div id="screen" style="border:1px solid #ccc; margin:5px; width:1400px; height:750px;"></div>
</body>
</html>